<!DOCTYPE html>
<html lang="en">

<!-- Head tag -->
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--Description-->
    
        <meta name="description" content="JavaScript高级程序设计（第3版） function factorial(num){        if (num &amp;lt;=1) {            return 1;        } else {            return num * factorial(num-1) ">
    

    <!--Author-->
    
        <meta name="author" content="John Doe">
    

    <!--Open Graph Title-->
    
        <meta property="og:title" content="高程3笔记1"/>
    

    <!--Open Graph Description-->
    

    <!--Open Graph Site Name-->
    <meta property="og:site_name" content="Hexo"/>

    <!--Type page-->
    
        <meta property="og:type" content="article" />
    

    <!--Page Cover-->
    

        <meta name="twitter:card" content="summary" />
    

    <!-- Title -->
    
    <title>高程3笔记1 - Hexo</title>

    <!-- Bootstrap Core CSS -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

    <!-- Custom CSS -->
    <link rel="stylesheet" href="/css/style.css">

    <!-- Custom Fonts -->
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="//fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
    <link href="//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Gallery -->
    <link href="//cdnjs.cloudflare.com/ajax/libs/featherlight/1.3.5/featherlight.min.css" type="text/css" rel="stylesheet" />

    <!-- Google Analytics -->
    


    <!-- favicon -->
    
	
</head>


<body>

    <!-- Menu -->
    <!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">逐风</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                
                    <li>
                        <a href="/">
                            
                                Home
                            
                        </a>
                    </li>
                
                    <li>
                        <a href="/archives">
                            
                                Archives
                            
                        </a>
                    </li>
                
                    <li>
                        <a href="/tags">
                            
                                Tags
                            
                        </a>
                    </li>
                
                    <li>
                        <a href="/categories">
                            
                                Categories
                            
                        </a>
                    </li>
                
                    <li>
                        <a href="https://github.com/klugjo/hexo-theme-clean-blog">
                            
                                <i class="fa fa-github fa-stack-2x"></i>
                            
                        </a>
                    </li>
                
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

    <!-- Main Content -->
    <!-- Page Header -->
<!-- Set your background image for this header in your post front-matter: cover -->

<header class="intro-header" style="background-image: url('http://www.codeblocq.com/assets/projects/hexo-theme-clean-blog/img/home-bg.jpg')">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <div class="post-heading">
                    <h1>高程3笔记1</h1>
                    
                    <span class="meta">
                        <!-- Date and Author -->
                        
                        
                            2018-01-02
                        
                    </span>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- Post Content -->
<article>
    <div class="container">
        <div class="row">

            <!-- Tags and categories -->
           

            <!-- Gallery -->
            

            <!-- Post Main Content -->
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <p>JavaScript高级程序设计（第3版）<br> function factorial(num){<br>        if (num &lt;=1) {<br>            return 1;<br>        } else {<br>            return num * factorial(num-1)<br>        }<br>}<br>定义阶乘函数一般都要用到递归算法;如上面的代码所示，在函数有名字，而且名字以后也不会变 的情况下，这样定义没有问题。但问题是这个函数的执行与函数名 factorial 紧紧耦合在了一起。为 了消除这种紧密耦合的现象，可以像下面这样使用 arguments.callee。<br>arguments.callee指向函数名 </p>
<p>function factorial(num){<br>    if (num &lt;=1) {<br>        return 1;<br>    } else {<br>        return num <em> arguments.callee(num-1)<br>} }<br>任意X-y区间的值<br>总共有 10 个可能的值(1 到 10)，而第一个可能的值是 1。而如果想要选择一个介于 2 到 10 之间的 值，就应该将上面的代码改成这样:<br>    var num = Math.floor(Math.random() </em> 9 + 2);</p>
<p>穿透效果，大的背景图图片覆盖在需要点击的区域比如小图标上面，这时小图标无法被点击，给大的背景图图片添加<br>    pointer-events: none;小图标就可以点击了</p>
<p>提升性能 的方法：事件委托，移除事件处理程序 （貌似不常用）<br>（不只是对完全同一种类型的才可以使用事件委托！！！借用event.target）<br>//target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。event.target.id </p>
<p>等等<br>// getTarget:function(event){  //返回事件的实际目标return event.target||event.srcElement; },<br>对“事件处理程序过多”问题的解决方案就是事件委托。事件委托利用了事件冒泡，只指定一个事 件处理程序，就可以管理某一类型的所有事件。例如，click 事件会一直冒泡到 document 层次。也就 是说，我们可以为整个页面指定一个 onclick 事件处理程序，而不必给每个可单击的元素分别添加事 件处理程序。<br>如果在一个复杂的 Web 应用程序中，对所有可单击的元素都采用这种方式，那么结果就会有数不 清的代码用于添加事件处理程序。此时，可以利用事件委托技术解决这个问题。使用事件委托，只需在 DOM 树中尽量最高的层次上添加一个事件处理程序，如下面的例子所示。 </p>
<p><ul id="myLinks"><br>    <li id="goSomewhere">Go somewhere</li><br>    <li id="doSomething">Do something</li><br>    <li id="sayHi">Say hi</li><br></ul><br>var list = document.getElementById(“myLinks”);<br>    EventUtil.addHandler(list, “click”, function(event){<br>        event = EventUtil.getEvent(event);<br>        var target = EventUtil.getTarget(event);<br>        switch(target.id </p>
<p>){<br>            case “doSomething”:<br>                document.title = “I changed the document’s title”;<br>                break;<br>            case “goSomewhere”:<br>                location.href = “<a href="http://www.wrox.com" target="_blank" rel="external">http://www.wrox.com</a> </p>
<p>“;<br>                break;</p>
<pre><code>       case &quot;sayHi&quot;: 9 alert(&quot;hi&quot;); 
       break; 
   } 
}) 
</code></pre><p>优点：<br> document 对象很快就可以访问，而且可以在页面生命周期的任何时点上为它添加事件处理程序 (无需等待 DOMContentLoaded 或 load 事件)。换句话说，只要可单击的元素呈现在页面上，<br>就可以立即具备适当的功能。 在页面中设置事件处理程序所需的时间更少。只添加一个事件处理程序所需的 DOM 引用更少，<br>所花的时间也更少。 整个页面占用的内存空间更少，能够提升整体性能。 </p>
<p>最适合采用事件委托技术的事件包括 click、mousedown、mouseup、keydown、keyup 和 keypress。 虽然 mouseover 和 mouseout 事件也冒泡，但要适当处理它们并不容易，而且经常需要计算元素的位置。<br>(因为当鼠标从一个元素移到其子节点时，或者当鼠标移出该元素时，都会触发 mouseout 事件。) </p>
<p>xhr超时设定 timeout<br>IE8 为 XHR 对象添加了一个 timeout 属性，表示请求在等待响应多少毫秒之后就终止。在给 timeout 设置一个数值后，如果在规定的时间内浏览器还没有接收到响应，那么就会触发 timeout 事 件，进而会调用 ontimeout 事件处理程序。这项功能后来也被收入了 XMLHttpRequest 2 级规范中。来 看下面的例子。<br>var xhr = createXHR();<br>    xhr.onreadystatechange = function(){<br>if (xhr.readyState == 4){ 20 try {<br>            if ((xhr.status &gt;= 200 &amp;&amp; xhr.status &lt; 300) || xhr.status == 304){<br>                alert(xhr.responseText);<br>            } else {<br>                alert(“Request was unsuccessful: “ + xhr.status);<br>            }<br>        } catch (ex){<br>//假设由 ontimeout 事件处理程序处理 }<br>} };<br>这个例子示范了如何使用 timeout 属性。将这个属性设置为 1000 毫秒，意味着如果请求在 1 秒钟 内还没有返回，就会自动终止。请求终止时，会调用 ontimeout 事件处理程序。但此时 readyState 可能已经改变为 4 了，这意味着会调用 onreadystatechange 事件处理程序。可是，如果在超时终止 请求之后再访问 status 属性，就会导致错误。为避免浏览器报告错误，可以将检查 status 属性的语 句封装在一个 try-catch 语句当中 </p>


                
            </div>

            <!-- Comments -->
            
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    


                </div>
            
        </div>
    </div>
</article>

    <!-- Footer -->
    <hr />

<!-- Footer -->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <ul class="list-inline text-center">
                    

                    

                    
                        <li>
                            <a href="https://github.com/klugjo/hexo-theme-clean-blog" target="_blank">
                                <span class="fa-stack fa-lg">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-github fa-stack-1x fa-inverse"></i>
                                </span>
                            </a>
                        </li>
                    

                    

                    

                    
                </ul>
                <p class="copyright text-muted">&copy; 2018 John Doe<br></p>
                <p class="copyright text-muted">Original Theme <a target="_blank" href="http://startbootstrap.com/template-overviews/clean-blog/">Clean Blog</a> from <a href="http://startbootstrap.com/" target="_blank">Start Bootstrap</a></p>
                <p class="copyright text-muted">Adapted for <a target="_blank" href="https://hexo.io/">Hexo</a> by <a href="http://www.codeblocq.com/" target="_blank">Jonathan Klughertz</a></p>
            </div>
        </div>
    </div>
</footer>


    <!-- After footer scripts -->
    
<!-- jQuery -->
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

<!-- Bootstrap -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- Gallery -->
<script src="//cdnjs.cloudflare.com/ajax/libs/featherlight/1.3.5/featherlight.min.js" type="text/javascript" charset="utf-8"></script>

<!-- Disqus Comments -->



</body>

</html>